<template>
    <div>
      <div class="app-container">
        <!-- 类型选择下拉框 -->
        <div style="margin-bottom: 12px;">
          <label>请选择图片类型：</label>
          <select v-model="selectedType" style="margin-left: 8px; padding: 4px;">
            <option value="">-- 请选择 --</option>
            <option value="acg-banner">二次元轮播图</option>
            <option value="normal-banner">普通轮播图</option>
            <option value="acg-hero">二次元大图</option>
            <option value="normal-hero">首页大图</option>
          </select>
        </div>
  
        <!-- 文件选择 -->
        <input type="file" @change="onFileChange" accept=".jpg,.jpeg" />
        <button @click="uploadImage" :disabled="!selectedType" style="margin-left: 8px;">上传</button>
  
        <!-- 提示信息 -->
        <p v-if="message" :style="{ color: message.includes('成功') ? 'green' : 'red' }">
          {{ message }}
        </p>
      </div>
    </div>
  </template>
  
  <script>
  import { uploadFile } from '@/api/cd/send';
  
  export default {
    data() {
      return {
        selectedFile: null,
        selectedType: '', // 新增：选中的类型
        message: ''
      };
    },
    methods: {
      onFileChange(event) {
        this.selectedFile = event.target.files[0] || null;
      },
      async uploadImage() {
        if (!this.selectedType) {
          this.message = '请先选择图片类型';
          return;
        }
        if (!this.selectedFile) {
          this.message = '请选择一张 JPG 图片';
          return;
        }
  
        const formData = new FormData();
        formData.append('file', this.selectedFile);
        // 注意：type 作为普通字段附加到 FormData
        formData.append('type', this.selectedType);
  
        try {
          await uploadFile(formData);
          this.message = '上传成功！';
        } catch (error) {
          this.message = '上传失败，请重试';
          console.error('上传错误:', error);
        }
      }
    }
  };
  </script>